<template>
	<div class="padding">
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
				<template v-slot:label>
					<div class="tab-label-box">{{ item.label }}</div>
				</template>
			</el-tab-pane>
		</el-tabs>
		<div class="detail-content">
			<div class="search-box flex align-center">
				<p class="text-label">年份</p>
				<el-select v-model="subsidyProjectYear" clearable  @change="handleSearch" class="m-2" placeholder="请选择">
					<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<aplid-base-crud :key="activeName" ref="crud" class="w-100" v-bind="{ ...baseConfig, ...$attrs }" :paramsObj="paramsObj">
        <template v-slot:detailDialog="{ row ,show}">
          <ApplyDetail :nowRowData="row" v-if="show"/>
        </template>
      </aplid-base-crud>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { baseConfig } from './config'
import ApplyDetail from './detail/index.vue'
type Props = {
	rowData?: any
	tabList?: any
	yearList?: any
}
const props = withDefaults(defineProps<Props>(), {
	rowData: {},
	tabList: [],
})
const subsidyProjectYear = ref('')

let paramsObj = computed({
	get() {
		return {
			subsidyProjectYear: subsidyProjectYear.value,
			creditCode: props.rowData.creditCode,
			subsidyType: activeName.value,
		}
	},
	set(val) {},
})

let activeName = ref(props.tabList[0].value)
const handleSearch = (e)=> {
  paramsObj.value.subsidyProjectYear = e
  handleRefresh()
}
const crud = ref()
const handleRefresh = () => {
	nextTick(() => {
		crud.value.refreshChange({
      ...paramsObj.value
    }, false)
	})
}
</script>
<style scoped lang="scss">
:deep(.el-tabs__active-bar) {
	border-radius: 2.5px;
	height: 5px;
	left: 4%;
	width: 30px !important;
	background-color: #0052d9;
}
:deep(.el-tabs__item) {
  padding: 0 10px;
}
.detail-content {
	padding: 0 20px;
}
.tab-label-box {
	padding: 4px 16px;
	border-radius: 5px;
	background: #eef2ff;
	font-family: 'Microsoft YaHei';
	font-weight: 400;
	font-size: 14px;
	text-align: left;
	color: #1c1c28;
}
.search-box {
	.text-label {
		margin-right: 20px;
		color: #000000e6;
		font-size: 14px;
		font-family: 'Microsoft YaHei';
		font-weight: 400;
		letter-spacing: 0;
	}
}
</style>
